import React, { useState } from 'react';
import axios from 'axios';
import { message } from 'antd';

interface LoginModalProps {
    visible: boolean;
    onClose: () => void;
}

const LoginModal: React.FC<LoginModalProps> = ({ visible, onClose }) => {
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState('');

    const getUserInfo = async () => {
        const res = await axios.get('/auth/info', {
        })
        if (res.data) {
            localStorage.setItem('userInfo', JSON.stringify(res.data?.user))
            window.location.reload()
        }
    }

    const handleLogin = async (values: any) => {
        try {
            setLoading(true);
            setError('');
            const res = await axios.post('/auth/login', {
                username: values.username,
                password: values.password
                , skipDecrypt: true
            });
            console.log('res', res)
            if (res.data?.token) {
                localStorage.setItem('token', res.data.token);
                message.success('登录成功');
                getUserInfo()

            } else {
                setError('登录失败');
            }
        } catch (err) {
            console.log('err', err)
            setError('登录失败，请稍后重试');
        } finally {
            setLoading(false);
        }
    };

    return (
        <div
            className="modal-overlay"
            style={{
                position: 'fixed',
                top: 0,
                left: 0,
                right: 0,
                bottom: 0,
                backgroundColor: 'rgba(0, 0, 0, 0.5)',
                display: visible ? 'flex' : 'none',
                justifyContent: 'center',
                alignItems: 'center',
                zIndex: 1000
            }}
        >
            <div
                className="modal-content"
                style={{
                    background: 'rgba(0, 24, 51, 0.9)',
                    borderRadius: '8px',
                    border: '1px solid rgba(0, 180, 255, 0.3)',
                    padding: '30px',
                    width: '500px'
                }}
            >
                <div style={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    marginBottom: '30px'
                }}>
                    <h2 style={{ color: '#fff', margin: 0, fontSize: '28px' }}>登录</h2>
                    {/* <button 
                        onClick={onClose}
                        style={{
                            background: 'none',
                            border: 'none',
                            color: '#fff',
                            cursor: 'pointer',
                            fontSize: '24px'
                        }}
                    >
                        ×
                    </button> */}
                </div>

                <form onSubmit={(e) => {
                    e.preventDefault();
                    const formData = new FormData(e.currentTarget);
                    handleLogin({
                        username: formData.get('username'),
                        password: formData.get('password')
                    });
                }}>
                    <div style={{ marginBottom: '20px' }}>
                        <label
                            style={{
                                display: 'block',
                                color: '#fff',
                                marginBottom: '8px',
                                fontSize: '18px'
                            }}
                        >
                            用户名
                        </label>
                        <input
                            name="username"
                            type="text"
                            required
                            placeholder="请输入用户名"
                            style={{
                                width: '100%',
                                padding: '12px',
                                background: 'rgba(0, 24, 51, 0.5)',
                                border: '1px solid rgba(0, 180, 255, 0.3)',
                                color: '#fff',
                                borderRadius: '4px',
                                fontSize: '16px'
                            }}
                        />
                    </div>

                    <div style={{ marginBottom: error ? '10px' : '30px' }}>
                        <label
                            style={{
                                display: 'block',
                                color: '#fff',
                                marginBottom: '8px',
                                fontSize: '18px'
                            }}
                        >
                            密码
                        </label>
                        <input
                            name="password"
                            type="password"
                            required
                            placeholder="请输入密码"
                            style={{
                                width: '100%',
                                padding: '12px',
                                background: 'rgba(0, 24, 51, 0.5)',
                                border: '1px solid rgba(0, 180, 255, 0.3)',
                                color: '#fff',
                                borderRadius: '4px',
                                fontSize: '16px'
                            }}
                        />
                    </div>

                    {error && (
                        <div style={{
                            color: '#ff4d4f',
                            marginBottom: '20px',
                            fontSize: '14px'
                        }}>
                            {error}
                        </div>
                    )}

                    <button
                        type="submit"
                        disabled={loading}
                        style={{
                            width: '100%',
                            background: 'rgba(0, 180, 255, 0.8)',
                            border: 'none',
                            height: '50px',
                            fontSize: '20px',
                            fontWeight: 500,
                            color: '#fff',
                            borderRadius: '4px',
                            cursor: 'pointer',
                            textShadow: '0 0 10px rgba(0, 180, 255, 0.5)'
                        }}
                    >
                        {loading ? '登录中...' : '登录'}
                    </button>
                </form>
            </div>
        </div>
    );
};

export default LoginModal;
